<template>
    <div class="intelligentsearch">
        <el-table :data="list" v-if="list.length > 0" border stripe>
            <el-table-column type="index" width="50"> </el-table-column>
            <el-table-column prop="faultType" label="故障类型" width="180">
            </el-table-column>
            <el-table-column prop="faultDevice" label="故障设备" width="180">
            </el-table-column>
            <el-table-column prop="expertName" label="专家" width="180">
            </el-table-column>
            <el-table-column prop="reason" label="故障原因"> </el-table-column>
            <el-table-column prop="imgUrl" label="故障图片" width="200">
                <template slot-scope="scope">
                    <img :src="scope.row.imgUrl" alt="" style="width: 180px" />
                </template>
            </el-table-column>
            <el-table-column prop="solution" label="诊断方案">
            </el-table-column>
            <el-table-column prop="desc" label="故障描述"> </el-table-column>
        </el-table>
        <img src="../../assets/暂无内容.png" alt="" v-else />
        <el-form>
            <el-form-item>
                <el-input
                    placeholder="输入搜索内容"
                    v-model="keywords"
                    type="textarea"
                    rows="7"
                ></el-input>
            </el-form-item>
            <el-button type="primary" plain @click="handleSubmit"
                >提交</el-button
            >
        </el-form>
    </div>
</template>

<script>
import { intelligentSearch } from "../../api";
import { getFault } from "../../utils";

export default {
    name: "IntelligentSearch",
    data() {
        return {
            keywords: "",
            contentShow: false,
            list: [],
        };
    },

    methods: {
        async handleSubmit() {
            try {
                const res = await intelligentSearch("/diagnosis/smartQuery", {
                    ask: this.keywords,
                    pageNo: 1,
                    pageSize: 10000,
                });
                console.log("-----------", res);
                if (res.data.code === 0 && res.data.data.list) {
                    this.list = res.data.data.list.map((item) => {
                        item.imgUrl = getFault(item.id);
                        return item;
                    });
                    this.keywords = "";
                    console.log("=====================", this.list);
                } else {
                    this.list = res.data.data;
                    this.keywords = "";
                }
            } catch (err) {
                this.$message.error(err);
            }
        },
    },
};
</script>

<style lang="less">
.intelligentsearch {
    .content {
        margin: 0;
        padding: 0;
        &-item {
            list-style-type: none;
            height: 40px;
            background-color: aqua;
        }
    }
    .el-table {
        margin-bottom: 30vh;
    }
    .el-form {
        position: absolute;
        width: 87vw;
        bottom: 0;
        background-color: #fff;

        .el-form-item {
            margin-bottom: 10px;
            .el-form-item__content {
                .el-textarea {
                    textarea {
                        background-color: #f4f5f5;
                    }
                }
            }
        }

        .el-button {
            position: absolute;
            bottom: 25px;
            right: 20px;
        }
    }

    img {
        display: block;
        width: 38vw;
        margin: 0 auto;
    }
}
</style>